<template>
  <q-card class="table-bg no-shadow" bordered>
    <q-card-section>
      <div class="text-h6 text-white">
        夜间模式
        <q-btn
          label="导出"
          color="blue"
          class="float-right text-capitalize shadow-3"
          icon="person"
        />
      </div>
    </q-card-section>
    <q-separator color="white" />
    <q-card-section class="q-pa-none">
      <q-table
        dark
        class="table-bg"
        :rows="data"
        :columns="columns"
        hide-bottom
      >
        <template v-slot:body-cell-Name="props">
          <q-td :props="props">
            <q-item style="max-width: 420px">
              <q-item-section avatar>
                <q-avatar>
                  <img :src="props.row.avatar" />
                </q-avatar>
              </q-item-section>

              <q-item-section>
                <q-item-label>{{ props.row.name }}</q-item-label>
              </q-item-section>
            </q-item>
          </q-td>
        </template>
        <template v-slot:body-cell-Action="props">
          <q-td :props="props">
            <q-btn icon="edit" size="sm" flat dense />
            <q-btn icon="delete" size="sm" class="q-ml-sm" flat dense />
          </q-td>
        </template>
        <template v-slot:body-cell-Progress="props">
          <q-td :props="props">
            <q-linear-progress
              dark
              :color="getColor(props.row.progress)"
              :value="props.row.progress / 100"
              class="q-mt-md"
            />
          </q-td>
        </template>
      </q-table>
    </q-card-section>
  </q-card>
</template>

<script setup lang="ts">
import { QTableProps } from 'quasar';
import { baseImg } from 'pages/data/list';
const data = [
  {
    name: '测试1',
    Crated_Date: '15/3/2020',
    Project: '主体布局',
    avatar: baseImg,
    progress: 80,
    des: '方案解决',
  },
  {
    name: '测试2',
    Crated_Date: '10/2/2018',
    Project: '树形表格',
    avatar: baseImg,
    progress: 50,
    des: '独立开发',
  },
  {
    name: '测试3',
    Crated_Date: '10/2/2018',
    Project: '购物',
    avatar: baseImg,
    progress: 100,
    des: '方案解决',
  },
  {
    name: '测试4',
    Crated_Date: '10/2/2019',
    Project: '文档',
    avatar: baseImg,
    progress: 60,
    des: '独立开发',
  },
  {
    name: '测试5',
    Crated_Date: '10/1/2020',
    Project: '网格',
    avatar: baseImg,
    progress: 30,
    des: '方案解决',
  },
];
const columns: QTableProps['columns'] = [
  { name: 'Name', label: '姓名', field: 'name', sortable: true, align: 'left' },
  {
    name: 'Crated Date',
    label: '创建日期',
    field: 'Crated_Date',
    sortable: true,
    align: 'left',
  },
  {
    name: 'Project',
    label: '项目',
    field: 'Project',
    sortable: true,
    align: 'left',
  },
  {
    name: 'Progress',
    label: '进度',
    field: 'Progress',
    sortable: true,
    align: 'left',
  },
  {
    name: 'Action',
    label: '操作',
    field: 'Action',
    sortable: false,
    align: 'center',
  },
];
const getColor = (val: number) => {
  if (val > 70 && val <= 100) {
    return 'green';
  } else if (val > 50 && val <= 70) {
    return 'blue';
  }
  return 'red';
};
</script>

<style>
.table-bg {
  background-color: #162b4d;
}
</style>
